<template>
	<view class="search-box" :style="{ width: width, backgroundColor: backgroundColor, borderRadius: radius, borderWidth: borderWidth }">
		<view class="search-box-l">
			<icon type="search" :size="14" color="#909399" />
			<input class="input" v-model="keyword" :placeholder="placeholder" confirm-type="search" @blur="onInputBlur" @confirm="onInputConfirm" />
			<icon v-if="keyword.length > 0" type="clear" :size="14" color="#909399" @tap.stop="clearInput"></icon>
		</view>

		<view class="search-box-r"><slot /></view>
	</view>
</template>

<script setup>
import { ref } from 'vue'

const emit = defineEmits(['search', 'blur', 'clear'])

const props = defineProps({
	width: {
		type: String,
		default: '710rpx'
	},
	backgroundColor: {
		type: String,
		default: '#fff'
	},
	borderWidth: {
		type: String,
		default: '2px'
	},
	radius: {
		type: String,
		default: '40rpx'
	},
	placeholder: {
		type: String,
		default: '请输入要查询的设备名称'
	}
})

const keyword = ref('')

const clearInput = () => {
	keyword.value = ''
	uni.hideKeyboard()
	emit('clear')
}

const onInputBlur = () => {
	emit('blur', {
		value: keyword.value
	})
}

const onInputConfirm = () => {
	emit('search', {
		value: keyword.value
	})
	setTimeout(() => {
		keyword.value = ''
	}, 30)
}
</script>

<style lang="scss" scoped>
.search-box {
	width: 100%;
	box-sizing: border-box;
	padding: 10rpx 20rpx;
	height: 80rpx;
	display: flex;
	align-items: center;
	border-width: 2px;
	border-style: solid;
	border-color: $u-primary;
	box-shadow: 0 0 2px 2px rgba(86, 119, 252, 0.3);

	&-l {
		flex: 1;
		display: flex;
		justify-content: center;
		align-items: center;

		.input {
			flex: 1;
			text-align: center;
			margin: 0 10rpx;
			font-size: 28rpx;
			color: $u-content-color;
		}
	}

	&-r {
		flex-shrink: 0;
		margin-left: 20rpx;
	}
}
</style>
